import React from 'react'
// ===================================================================== antd
import { SearchOutlined } from '@ant-design/icons'
import Bcimga from '@img/index/z1.png'
import Bcimgb from '@img/index/z2.png'
import Bcimgc from '@img/index/z3.png'
import Bcimgd from '@img/index/z4.png'
import Bcimge from '@img/index/z5.png'
import dbImg  from '@img/daiban.svg'
// ===================================================================== global declare
const { $http, $Lazy, $fn } = window
// ===================================================================== Lazy
const Page 			= $Lazy.load(()=>import('#tp/page/page-container'))
const Box 			= $Lazy.load(()=>import('#tp/box/box'))
const Image 		= $Lazy.load(()=>import('@tp/image'))
const DatePicker	= $Lazy.load(()=>import('@antd/form/datePicker'))
const Button 		= $Lazy.load(()=>import('@antd/button'))
const Echart 		= $Lazy.load(()=>import('@plugin/echarts/echart'))
const $time 		= $Lazy.file(()=>import('@com/utils/time'))
// ===================================================================== component
class Index extends React.Component{
	state = {
		data:[],
		total:[],
		casePie:{_data:[]},
		date:{},
		kindPie:{_data:[]},
		reportLine:{_data:[]},
		specimenLine:{_data:[]},
		user:$fn.getUser(),
		todo:[],
		msg:[]
	}
	
	colors = ['#5b7ffa', '#f7c137', '#00cffb', '#32b5cb', '#42e0a5' ]
	images = [ Bcimga, Bcimgb, Bcimgc, Bcimgd, Bcimge ]
	dbColors = [
		{filter: 'drop-shadow(rgb(44, 199, 172) 28px 0px)', txt: '#2cc7ac'},
		{filter: 'drop-shadow(rgb(15, 155, 207) 28px 0px)', txt: '#0F9BCF'},
		{filter: 'drop-shadow(rgb(248, 157, 0) 28px 0px)', txt: '#F89D00'},
		{filter: 'drop-shadow(rgb(255, 86, 86) 28px 0px)', txt: '#FF5656'}
	]
	
	componentDidMount(){
		$time.then( f => {
			const arr = f.duration['1-9-9']()
			this.setState({ date:{ start: arr[0], end: arr[1] } }, this.fetch )
			
		})
		// 总计
		$http.pull(this,'index/statistics', {pullLoading:'statisticsLoading'})
		// 待办
		$http.pull(this,'work-event/index', {pullLoading:'todoLoading', dataName:null}).then(items => this.setState({todo: items}))
		// 通知
		$http.pull(this,'msg-notice/index', {pullLoading:'msgLoading', dataName:null}).then(items => this.setState({msg: items}))
		// 统计图
		$http.pull(this,'index/total2CharView', {pullLoading:'echartLoading', dataName:null}).then(data=>{
			const reportLine = data['report_line']
			const specimenLine = data['specimen_line']
			// 拆线 2
			reportLine._data = reportLine.data.map(v=>{
				let data1 = []
				reportLine.xAxis.forEach(x1=>{
					let data2 = 0
					v.data.forEach(i=>{
						if (x1 === i.name) {
							data2 = i.total;
						}
					})
					data1.push(data2)
				})
				return {
					data:data1,
					type:'line',
					name: v.type,
					smooth:true,
				}
			})
			// 拆线 2
			specimenLine._data = specimenLine.data.map(v=>{
				let data1 = []
				reportLine.xAxis.forEach(x1=>{
					let data2 = 0
					v.data.forEach(i=>{
						if (x1 === i.name) {
							data2 = i.total;
						}
					})
					data1.push(data2)
				})
				return {
					data: data1,
					type:'line',
					name: v.type,
					smooth:true,
				}
			})
			
			this.setState({
				casePie: data['case_pie'],
				kindPie: data['kind_pie'],
				reportLine,
				specimenLine
			})
		})
	}
	// 按时间统计
	fetch = () =>{
		const { start, end } = this.state.date
		$http.pull(this,'index/total', { param:{ start_time:start, end_time: end}, pullLoading:'totalLoading', dataName:'total' })
	}
	
	onDatePickerChange = value => {
		this.setState({ date:{ start: value[0], end: value[1] } })
	}
	
	colors = i => {
		if((i+1)%2 === 0){
			return '#f7c137'
		}else{
			return '#42e0a5'
		}
	}
	
	render(){
		const {
			data, total, date, statisticsLoading, totalLoading, echartLoading, user,
			casePie, kindPie, reportLine, specimenLine, todoLoading, msgLoading, todo, msg
		}= this.state
		return (
			<Page className='fx' nobc>
				<div className='ex rel'>
					<div className='abs_full oys scrollbar'>
						{/* 头部 */}
						<Box contentClassName='fxm p10' minHeight={0}>
							<Image wrap round width={40} height={40} src={user.head_portrait?(user.head_portrait.indexOf('http')===-1?user.img_domain+user.head_portrait:user.head_portrait):''} className='bor1'/>
							<div className='ml10'>
								<h3 className='f14'><b className='f16 mr5'>{$fn.val(user.real_name)}</b>您好！祝您开心每一天！</h3>
								<div className='fx mt5 g6'>
									<h6><span className='g9'>职位：</span>{$fn.val(user.position)}</h6>
									<h6 className='ml30'><span className='g9'>公司：</span>{$fn.val(user.company)}</h6>
									<dl className='fx ml30'>
										<dd className='mr15'><span className='g9'>上次访问时间:</span> {$fn.val(user.last_login_time)}</dd>
										<dd><span className='g9'>本次登录时间:</span> {$fn.val(user.login_time)}</dd>
									</dl>
								</div>
							</div>
						</Box>
						{/* 总计 */}
						<Box className='mt5' loading={statisticsLoading}>
							<div className='fxmj'>
								{
									data.map((v,i)=> (
										<div key={i} className='p20 wh ml10 r5px cf mtb5' style={{background:`url(${this.images[i]}) no-repeat center/cover`}}>
											<p className=''>{v.title}</p>
											<div className='mt10 fxm f24 ar '>{v.data}</div>
										</div>
									))
								}
							</div>
						</Box>
						<div className='fxmj'>
							{/* 待办 */}
							<Box className='mt5 w mr10' title='待办事项' loading={todoLoading} titleSuffix={<span className='cp' onClick={() => $fn.push(this, '/administrators/workbench/todo')}>MORE</span>}>
								<div className='oys scrollbar' style={{height: 190}}>
									{todo.map((v, i) => {
										const date = v.created_at.split(' ')[0]
										return (
											<div className='fxm plr10 mtb10 oh' key={i}>
												<img alt='' width='20px' style={{left: -28, filter: this.dbColors[v.level - 1]?.filter}} src={dbImg} className='rel' />
												<span className='ex omits-1'>{v.title}</span>
												<span className='ml20'>{date}</span>
											</div>
										)
									})}
								</div>
							</Box>
							{/* 通知 */}
							<Box className='mt5 w' title='消息通知' loading={msgLoading} titleSuffix={<span className='cp' onClick={() => $fn.push(this, '/administrators/workbench/info')}>MORE</span>}>
								<div className='oys scrollbar' style={{height: 190}}>
									{msg.map((v, i) => {
										const date = v.created_at.split(' ')[0]
										return (
											<div className='fxm plr10 mtb10' key={i}>
												<i className='r100px mr10' style={{width:6,height:6, background: this.dbColors[v.level - 1]?.txt }}></i>
												<span className='ex omits-1'>{v.title}</span>
												<span className='ml20'>{date}</span>
											</div>
										)
									})}
								</div>
							</Box>
						</div>
						
						{/* 按时间统计 */}
						<Box className='mt5' title='按时间统计'  loading={totalLoading} titleSuffix={
							<div className='fxm'>
								<div className='g6 mr10'>操作时间</div>
								<DatePicker width={350} range value={[date.start, date.end]} onChange={this.onDatePickerChange} showTime bordered={false}/>
								<Button className='ml10' onClick={this.fetch} label='查询' icon={<SearchOutlined />} />
							</div>
						}>
							<div className='fxw pb10'>
								{
									total.map((v,i)=> (
										<div key={i} className='fl ml35 mt10 tc fxmc bcb r3px' style={{width:'120px',height:'80px'}}>
											<dl>
												<dt className='g3 f12 fxm'>
													<div className='r8px mr5 fxmc' style={{width:10,height:10, background:this.colors(i)}}><p className='bcf r5px' style={{width:4,height:4}}></p></div>
													{v.title}
												</dt>
												<dd className='mt5 f18 c0 b'>{v.data}</dd>
											</dl>
										</div>
									))
								}
							</div>
						</Box>
						
						<div className='mt5 fx'>
							<Box className='ex mr5' title={specimenLine.title} loading={echartLoading}>
								<Echart type={specimenLine.type} data={specimenLine._data} xdata={specimenLine.xAxis} name={specimenLine.title} />
							</Box>
							<Box className='ex' title={reportLine.title} loading={echartLoading}>
								<Echart type={reportLine.type} data={reportLine._data} xdata={reportLine.xAxis} name={reportLine.title} />
							</Box>
						</div>
						
						<div className='mt5 fx'>
							<Box className='ex mr5' title={casePie.title} loading={echartLoading}>
								<Echart type={casePie.type} data={casePie.data} name={casePie.title} />
							</Box>
							<Box className='ex' title={kindPie.title} loading={echartLoading}>
								<Echart type={kindPie.type} data={kindPie.data} name={kindPie.title} />
							</Box>
						</div>
						
					</div>
				</div>
			</Page>
		)
	}
}
export default Index